<template>
  <div class="tutorial">
    <h2>🛡️ 全局前置守卫（beforeEach）学习</h2>
    <p>全局前置守卫在每次导航发生前触发，可用于鉴权、埋点等。</p>

    <h3>使用场景</h3>
    <ul>
      <li>登录态校验：未登录跳转到 <code>/login</code>。</li>
      <li>权限控制：根据角色拦截访问。</li>
      <li>统计分析：记录 <code>to</code>/<code>from</code> 信息。</li>
    </ul>

    <h3>示例配置（router/index.js）</h3>
    <pre class="code"><code>import router from './index'

router.beforeEach((to, from, next) => {
  const isAuthed = Boolean(localStorage.getItem('token'))
  if (to.meta.requiresAuth && !isAuthed) {
    next({ path: '/login', query: { redirect: to.fullPath } })
  } else {
    next()
  }
})</code></pre>

    <p class="tip">提示：守卫应写在路由创建之后且只注册一次。</p>
  </div>
</template>

<script setup>
// 本教程提供 router.beforeEach 的使用示例及说明
</script>

<style scoped>
.tutorial { padding: 20px; }
h2 { margin-bottom: 10px; }
h3 { margin-top: 20px; margin-bottom: 8px; }
.code { background: #1e1e1e; color: #d4d4d4; padding: 12px; border-radius: 8px; overflow:auto; }
.tip { margin-top: 10px; color: #0f766e; background: #ccfbf1; padding: 8px 12px; border-radius: 6px; }
</style>